<template>
    <div class="share">
        <!-- 内容一 -->
        <div class="content1">
            <div class="top-title pr">
                <img :src="loopInfo.avatar" alt="">
                <p>{{loopInfo.name}}</p>
                <p>{{loopInfo.createDate}}</p>
            </div>
            <div class="matter">
                <img :src="loopInfo.imgList[0].img" alt="" v-if="loopInfo.imgList != [] && loopInfo.imgList.length != 0">
                <p>{{loopInfo.title}}</p>
                <p>{{loopInfo.content}}</p>
            </div>
            <div class="comment">
                <span>评论</span>
                <ul>
                    <li style="padding-left: 0; border-bottom: none; text-align: center;">暂无评论~</li>
                    <li v-for="(item, index) in commentList" :key="index">
                        <img :src="item.userAvatar" alt="">
                        <h3>{{item.userNickname}} &nbsp;&nbsp;&nbsp;<span>{{item.createDate}}</span></h3>
                        <p>{{item.content}}</p>
                    </li>
                </ul>
                <div class="inputBox">
                </div>
            </div>
        </div>
        <!-- 内容一 End -->
    </div>
</template>
<script>
    export default {
        data () {
            return {
                loopInfo: '',
                commentList: ''
            }
        },
        created () {
            // this.loopId = this.$route.params.loopId;
            this.type = this.$route.query.type;
            this.objectId = this.$route.query.objectId;
        },
        mounted () {
            this.getLoopInfo();
            this.getCommentList();
        },
        methods: {
            // 获取圈详情
            getLoopInfo(){
                this.$ajax({
                    url: `${this.baseUrl}/api/loopApiController/getLoopInfo`,
                    data: {
                        loopId: this.objectId
                    },
                    success: res => {
                        if(res.resultCode==0){
                            this.loopInfo = res.resultData;
                        }
                    }
                });
            },
            // 获取评论
            getCommentList(){
                this.$ajax({
                    url: `${this.baseUrl}/api/loopApiController/getCommentList`,
                    data: {
                        type:  this.type,
                        objectId: this.objectId,
                        page: 0,
                        pageSize: 2
                    },
                    success: res => {
                        if(res.resultCode==0){
                            this.commentList = res.resultData;
                        }
                    }
                });
            },
        },
        filters: {

        },
        computed:{
            // createDate () {
            //     let _this = this;
            //     let time = [];
            //     this.commentList.map((v,i)=>{
            //         time.push(_this.tools.getDateDiff(Date.parse(new Date(_this.commentList[i].createDate))));
            //     });
            //     return time;
            // },
        }
    }
</script>
<style lang="less" scoped>
.share{
    background-color: #ecf3f6;
}
// 内容一样式
.content1{
    >.matter{
        padding: 0 .08rem .4rem .08rem;
        background-color: #fff;
        >img{
            width: 100%;
            border-radius: .08rem;
        }
        >p{
            padding: .3rem .24rem 0 .24rem;
        }
        >p:nth-of-type(1){
            color: #333;
            font-size: .32rem
        }
        >p:nth-of-type(2){
            color: #999;
            font-size: .26rem;
        }
    }
}
//评论
.top-title{
    padding: .3rem 0 .2rem 0;
    background-color: #fff;
    >img{
        float: left;
        margin: 0 .2rem .3rem .26rem;
        width: .74rem;
        height: .74rem;
        border-radius: 50%;
    }
    >p:nth-of-type(1){
        color: #333;
    }
    >p:nth-of-type(2){
        color: #999;
    }
    >.add-btn{
        top: .4rem;
        right: 0;
        width: 1.52rem;
        margin-right: .3rem;
        background-color: #29c6ff;
        border-radius: .3rem;
        font-size: .26rem;
        line-height: .5rem;
        color: #fff;
    }
}
.comment{
    background-color: #fff;
    padding: 0.2rem  0.2rem .2rem 0.2rem!important;
    margin: .2rem 0 .9rem 0;
    >span{
        color: #0588b6;
    }
    ul {
        padding-top: 0.2rem;
        li{
            padding-left:1rem;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
            border-top: 1px solid #eaf2f5;
            border-bottom: 0 none!important;
            position:relative;
            line-height: 0.42rem;
            font-size: 0.3rem;
            h3{
                font-size: 0.3rem;
                span{
                    color:#666;
                }
            }
            >img{
                position:absolute;
                left:0;
                width: 0.84rem;
                height: 0.84rem;
                border-radius: 50%;
            }
            >span{
                position:absolute;
                right:0;
                top: 50%;
                transform: translateY(-50%);
            }
            &.more{
                padding-left: 0;
                font-size: .32rem;
                text-align: center;
                color: #71c4e1;
            }
        }
    }
}
.inputBox{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: .2rem .5rem;
    background-color: #fff;
    box-shadow: 0 -0.3rem .3rem rgba(237, 245, 250, 0.7);
    >.sendIcon{
        line-height: .7rem;
        font-size: .3rem;
        color: #fff;
        background-color: #29c6ff;
        vertical-align: middle;
        border-radius: .4rem;
        text-align: center;
    }
}
</style>
